<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
                    <h1>登录</h1>
                    <h2>欢迎来到后台管理页面</h2>
                    <el-form-item prop="username">
                        <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password"
                            show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" class="login_btn" type="primary" size="default" @click="login">
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElNotification } from 'element-plus'
//引入获取当前时间的函数
import { getTime } from '@/utils/time'
//引入用户相关的小仓库
import useUserStore from '@/store/modules/user'

//获取用户相关的小仓库
let useStore = useUserStore()
//获取路由器
let $router = useRouter()
//获取路由信息
let $route = useRoute()
//获取el-form组件
let loginForms = ref()
//定义变量控制按钮加载状态
let loading = ref(false)
//收集账号与密码的数据
let loginForm = reactive({ username: '', password: '' })
//登录按钮回调
const login = async () => {
    //保证全部表单校验通过再发请求
    await loginForms.value.validate()
    //加载效果，开始加载
    loading.value = true
    try {
        //保证登录成功
        await useStore.userLogin(loginForm)
        //判断是否有query参数，如果有则跳转到对应路径，没有则跳转到首页
        let redirect: any = $route.query.redirect
        //编程式导航跳转到首页
        $router.push({ path: redirect || '/' })
        //登录成功的提示信息
        ElNotification({
            type: 'success',
            message: '欢迎回来',
            title: `HI,${getTime()}好`,
        })
        //登录成功加载效果消失
        loading.value = false
    } catch (error) {
        //登录识别加载效果消失
        loading.value = false
        //登录失败的提示信息
        ElNotification({
            type: 'error',
            message: (error as Error).message,
        })
    }
}
//自定义校验规则函数
const validatorUserName = (rule: any, value: any, callback: any) => {
    //rule即为数组校验规则对象，value为表单元素文本内容，符合条件callback放行通过，否则注入错误信息
    if(value.length >= 5 && value.length <= 10) {
        callback()
    } else {
        callback(new Error('账号长度至少为5位，至多为10位'))
    }
}
const validatorPassword = (rule: any, value: any, callback: any) => {
    //rule即为数组校验规则对象，value为表单元素文本内容，符合条件callback放行通过，否则注入错误信息
    if(value.length >= 6 && value.length <= 15) {
        callback()
    } else {
        callback(new Error('密码长度至少为6位，至多为15位'))
    }
}
//定义表单检验配置对象
const rules = {
    username: [
        //required代表这个字段必须要检验，trigger是触发检验表单的时机
        { trigger: 'change', validator: validatorUserName }
    ],
    password: [
        { trigger: 'change', validator: validatorPassword }
    ]
}
</script>

<style scoped lang="scss">
.login_container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;
}

.login_form {
    position: relative;
    width: 80%;
    top: 30vh;
    background-color: rgba(112, 97, 154, 0.7);
    background-size: cover;
    padding: 2.5rem;
    border-radius: 0.625rem;
}

h1 {
    color: white;
    font-size: 2.5rem;
}

h2 {
    color: white;
    font-size: 1.25rem;
    margin: 1.25rem 0;
}

.login_btn {
    width: 100%;
}
</style>
